<template>
  <div class="favorites-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>我的收藏</h2>
      <p>查看和管理你收藏的提示词</p>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-search-section">
      <div class="search-input-wrapper">
        <el-input 
          v-model="searchQuery" 
          placeholder="搜索收藏的提示词..." 
          class="favorite-search-input"
          prefix-icon="el-icon-search"
        ></el-input>
      </div>
      <div class="filter-options">
        <el-select v-model="categoryFilter" placeholder="按分类筛选" clearable size="small">
          <el-option label="全部" value=""></el-option>
          <el-option label="人物肖像" value="portrait"></el-option>
          <el-option label="风景摄影" value="landscape"></el-option>
          <el-option label="动漫插画" value="anime"></el-option>
          <el-option label="故事创作" value="story"></el-option>
          <el-option label="代码生成" value="code"></el-option>
        </el-select>
        <el-select v-model="sortBy" placeholder="排序方式" size="small">
          <el-option label="收藏时间（新到旧）" value="newest"></el-option>
          <el-option label="收藏时间（旧到新）" value="oldest"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 收藏列表 -->
    <div v-if="filteredFavorites.length > 0" class="favorites-list">
      <div 
        v-for="item in filteredFavorites" 
        :key="item.id"
        class="favorite-item"
      >
        <!-- 收藏项内容 -->
        <div class="favorite-content" @click="usePrompt(item)">
          <!-- 预览图 -->
          <div class="favorite-preview">
            <div 
              class="preview-image" 
              :style="{ backgroundImage: `url(${item.previewImage})` }"
            ></div>
          </div>
          
          <!-- 提示词信息 -->
          <div class="favorite-info">
            <div class="prompt-text">{{ item.prompt }}</div>
            <div class="favorite-meta">
              <div class="platform-tags">
                <el-tag 
                  v-for="platform in item.platforms" 
                  :key="platform"
                  size="small"
                  effect="plain"
                  class="platform-tag"
                >
                  {{ platform }}
                </el-tag>
              </div>
              <div class="collect-time">收藏于 {{ formatTime(item.collectTime) }}</div>
            </div>
            <div class="favorite-stats">
              <span class="stat-item">
                <StarFilled class="icon" /> {{ item.likes }}
              </span>
              <span class="stat-item">
                <ChatDotRound class="icon" /> {{ item.comments }}
              </span>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="favorite-actions">
          <el-button 
            size="small" 
            @click="usePrompt(item)"
            type="primary"
            class="action-btn"
          >
            使用
          </el-button>
          <el-button 
            size="small" 
            @click="sharePrompt(item)"
            class="action-btn"
          >
            分享
          </el-button>
          <el-button 
            size="small" 
            @click="removeFavorite(item)"
            type="danger"
            class="action-btn"
          >
            取消收藏
          </el-button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">
        <Collection />  
      </div>
      <h3>暂无收藏</h3>
      <p>快去收藏你喜欢的提示词吧！</p>
      <el-button type="primary" @click="goToSquare">
        去广场看看
      </el-button>
    </div>

    <!-- 分享对话框 -->
    <el-dialog 
      title="分享提示词" 
      v-model="showShareDialog"
      width="50%"
    >
      <div class="share-dialog-content">
        <div class="share-prompt">
          {{ currentShareItem.prompt }}
        </div>
        <div class="share-options">
          <h4>分享方式</h4>
          <div class="share-buttons">
            <el-button class="share-btn" icon="el-icon-chat-line-round">分享到社区</el-button>
            <el-button class="share-btn" icon="el-icon-document-copy">复制链接</el-button>
            <el-button class="share-btn" icon="el-icon-message">发送给朋友</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { StarFilled, ChatDotRound, Collection } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

export default {
  name: 'Favorites',
  components: {
    StarFilled,
    ChatDotRound,
    Collection
  },
  setup() {
    const router = useRouter()
    const searchQuery = ref('')
    const categoryFilter = ref('')
    const sortBy = ref('newest')
    const showShareDialog = ref(false)
    const currentShareItem = ref({})

    // 模拟收藏数据
    const favorites = ref([
      {
        id: 1,
        prompt: '一只可爱的小猫在阳光下睡觉，高清细节，逼真风格',
        platforms: ['豆包', '通义'],
        previewImage: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=500&auto=format&fit=crop',
        collectTime: new Date('2024-01-14T10:30:00'),
        likes: 128,
        comments: 24,
        category: 'portrait'
      },
      {
        id: 2,
        prompt: '城市夜景，霓虹灯闪烁，赛博朋克风格，未来感十足',
        platforms: ['即梦', '豆包'],
        previewImage: 'https://images.unsplash.com/photo-1546436836-07a91091f160?w=500&auto=format&fit=crop',
        collectTime: new Date('2024-01-13T09:15:00'),
        likes: 256,
        comments: 42,
        category: 'landscape'
      },
      {
        id: 3,
        prompt: '山水画，宁静的湖泊和远山，中国传统水墨画风格',
        platforms: ['通义', '即梦'],
        previewImage: 'https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?w=500&auto=format&fit=crop',
        collectTime: new Date('2024-01-12T16:45:00'),
        likes: 89,
        comments: 15,
        category: 'landscape'
      },
      {
        id: 4,
        prompt: '用JavaScript实现一个响应式的数据绑定系统，类似Vue的实现原理',
        platforms: ['豆包'],
        previewImage: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=500&auto=format&fit=crop',
        collectTime: new Date('2024-01-11T14:20:00'),
        likes: 64,
        comments: 12,
        category: 'code'
      }
    ])

    // 计算筛选后的收藏列表
    const filteredFavorites = computed(() => {
      let result = [...favorites.value]
      
      // 搜索筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(item => 
          item.prompt.toLowerCase().includes(query) ||
          item.platforms.some(p => p.toLowerCase().includes(query))
        )
      }
      
      // 分类筛选
      if (categoryFilter.value) {
        result = result.filter(item => item.category === categoryFilter.value)
      }
      
      // 排序
      result.sort((a, b) => {
        const timeA = new Date(a.collectTime).getTime()
        const timeB = new Date(b.collectTime).getTime()
        return sortBy.value === 'newest' ? timeB - timeA : timeA - timeB
      })
      
      return result
    })

    // 使用提示词（跳转到首页）
    const usePrompt = (item) => {
      // 这里可以将提示词传递到首页
      router.push('/')
    }

    // 分享提示词
    const sharePrompt = (item) => {
      currentShareItem.value = item
      showShareDialog.value = true
    }

    // 移除收藏
    const removeFavorite = (item) => {
      ElMessageBox.confirm(
        '确定要取消收藏这个提示词吗？',
        '取消收藏',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        const index = favorites.value.findIndex(f => f.id === item.id)
        if (index > -1) {
          favorites.value.splice(index, 1)
        }
        ElMessage.success('已取消收藏')
      }).catch(() => {
        // 取消操作
      })
    }

    // 跳转到广场
    const goToSquare = () => {
      router.push('/square')
    }

    // 格式化时间
    const formatTime = (time) => {
      return new Date(time).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    return {
      searchQuery,
      categoryFilter,
      sortBy,
      favorites,
      filteredFavorites,
      showShareDialog,
      currentShareItem,
      usePrompt,
      sharePrompt,
      removeFavorite,
      goToSquare,
      formatTime
    }
  }
}
</script>

<style scoped>
.favorites-container {
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h2 {
  font-size: 32px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #606266;
}

.filter-search-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 20px;
}

.search-input-wrapper {
  flex: 1;
  min-width: 300px;
}

.favorite-search-input {
  width: 100%;
  max-width: 500px;
}

.filter-options {
  display: flex;
  gap: 15px;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.favorite-item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s;
}

.favorite-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.12);
}

.favorite-content {
  display: flex;
  gap: 20px;
  padding: 20px;
  cursor: pointer;
}

.favorite-preview {
  width: 200px;
  flex-shrink: 0;
}

.preview-image {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  transition: transform 0.3s;
}

.favorite-item:hover .preview-image {
  transform: scale(1.05);
}

.favorite-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prompt-text {
  font-size: 16px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 15px;
  word-break: break-word;
}

.favorite-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.platform-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.platform-tag {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #d9ecff;
}

.collect-time {
  font-size: 12px;
  color: #909399;
}

.favorite-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
  font-size: 14px;
}

.icon {
  color: #f56c6c;
  font-size: 14px;
}

.favorite-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-top: 1px solid #ebeef5;
}

.action-btn {
  padding: 6px 16px;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.empty-icon {
  font-size: 80px;
  color: #dcdfe6;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 20px;
  color: #303133;
  margin-bottom: 10px;
}

.empty-state p {
  font-size: 16px;
  color: #606266;
  margin-bottom: 30px;
}

/* 分享对话框样式 */
.share-dialog-content {
  padding: 10px 0;
}

.share-prompt {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
  margin-bottom: 20px;
  line-height: 1.6;
  word-break: break-word;
}

.share-options h4 {
  margin-bottom: 15px;
  color: #303133;
}

.share-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.share-btn {
  flex: 1;
  min-width: 150px;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .favorites-container {
    padding: 10px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .filter-search-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input-wrapper {
    min-width: auto;
  }
  
  .filter-options {
    flex-direction: column;
  }
  
  .favorite-content {
    flex-direction: column;
  }
  
  .favorite-preview {
    width: 100%;
  }
  
  .preview-image {
    height: 200px;
  }
  
  .favorite-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .favorite-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .action-btn {
    flex: 1;
    min-width: 100px;
  }
}
</style>